<template>
  <el-dropdown class="lang-select-dropdown">
    <svg
        class="icon"
        aria-hidden="true"
        font-size="45px"
        :class="{'svg-color': isWhite}"
      >
        <use xlink:href="#iconzhongyingwen" />
      </svg>

      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="item of langOptions" :key="item.value" :disabled="language === item.value">
            <span @click="handleSetLuange(item.value)">{{ item.name }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { store } from '@/store';
import { useI18n } from 'vue-i18n'
import { computed, ref } from 'vue';
import { AppActionTypes } from '@/store/modules/app/action-types';
import { ElMessage } from 'element-plus';
type LanguageType = { name:string, value: string }
defineProps<{ isWhite?: boolean }>()

const { locale } = useI18n()

const langOptions = ref<Array<LanguageType>>([
  { name: 'en', value: 'en' },
  { name: '中文', value: 'zh-cn' }
])

const language = computed(() => {
  return store.state.app.language
})

const handleSetLuange = (lang: string) => {
  locale.value = lang
  store.dispatch(AppActionTypes.ACTION_SET_LANGUAGE, lang)
  ElMessage({
    message: "Switch Language Success",
    type: "success"
  })
}
</script>

<style lang="scss" scoped>
.lang-select-dropdown {
  :deep(.el-only-child__content){
    outline: none;
  }
}
</style>
